import React from 'react';
import ReactDOM from 'react-dom';
// import App from './App';
import './index.css';
import { Table } from 'antd';
import { InputNumber } from 'antd';
import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

// ReactDOM.render(
//   <App />,
//   document.getElementById('root')
// );

class TestTalbe extends  React.Component{
    constructor(props) {
        super(props);
        this.dataSource = [{
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号'
        }, {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园2号'
        }];
        this.state = {data: this.dataSource};
        this.columns = [{
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            render: function (text,record,index) {
                return <div>{text}</div>
            }
        }, {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            render:  (text,record,index) => {
                console.log("render.text=",text,record.age,index)
                return (<InputNumber  value={record.age} onChange={(value)=>{this.onChange(value,record)}} />)
            }
        }, {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        }];
    }
     onChange(value,record) {
        console.log('changed', value);
        console.log('changed', record);
        record.age=(value);

        //一定要执行 setState才能重新渲染
        //  this.setState({data: this.dataSource}) ;
         this.setState({})
         var timestamp = (new Date()).valueOf();
         console.log(timestamp)
         // console.log(this.dataSource)
         console.log(this.state)
    }
    render(){
        return (
            <Table dataSource={this.state.data} columns={this.columns} />
        );
    }

}

ReactDOM.render(

<TestTalbe  />
        ,
    document.getElementById('root')
);